<template>
	<view class="page-content p-l-18 p-r-18 p-b-10">
		<view class="bor-rad19 m-t-10 b-s-1 bg_fff m-t-20" :class="item.isActive ? 'active':''" v-for="(item,index) in nftList" :key="index">
			<view class="c_fff view flex-row justify-between p-l-11 p-t-20 p-r-13 p-b-17">
				<view class="view flex-row fz-43">
					<view class="m-r-11">
						<image :src="item.image" class="w46 h46"/>
					</view>

					<view class="m-t-2">
						<view class="fz-14 c_0a1">{{ item.nft_name }}</view>
						<view class="view flex-row m-t-9">
							<view class="fz-12 c_969">单张贡献值：{{ item.calculate }}</view>
							<view class="w12 h15 m-l-6"></view>
							<view class="w12 h15 m-l-3"></view>
							<view class="w12 h15 m-l-3"></view>
						</view>
					</view>
				</view>
				<view class="fz-12 m-t-3 text-right w100">
					<view class="c_101">我的持有</view>
					<view class="m-t-10 c_608">{{ item.hold_number }}</view>
				</view>
			</view>
			<view class="m-l-13 m-r-12" style="border-top: 1px solid #EDEDED;"></view>
			<view class="p-l-13 p-r-13 p-b-20 p-t-14 view flex-row justify-between align-center">
				<view class="input-num">
					<UniNumberBox v-model="item.numVal" :max="item.hold_number" :min="1" class="inn-number"></UniNumberBox>
				</view>
				<view>
					<button class="bg_678 w110 h31 bor-rad8 view flex-row align-center justify-center c_fff fz-14" @click="chooseThis(index)">{{ item.isActive ?'取消': '选择'}}</button>
				</view>
			</view>
		</view>
		<view class="fitt-bottom">
			<el-button  class="btn-c bddctn" block  type="primary" @click="handleSelectCommit">确认</el-button>
		</view>
	</view>
</template>

<script>
	import UniNumberBox from '@/components/uni-number-box/uni-number-box'
	import elButton from '@/components/el-button/el-button'
	import { getnftList } from '@/apis/pool'
	export default {
		components: {
			UniNumberBox,
			elButton
		},
	    data() {
	        return {
			  numVal: '',
	          indicatorDots: true,
			  nftList: [],
	          autoplay: true,
	          interval: 2000,
	          duration: 500
	        }
	    },
		created() {
			this.nftList = [];
			this.fetchData()	
			
		},
	    methods: {
			// 确认nft数量
			handleSelectCommit() {
				const arr = this.nftList.filter( item => item.isActive)
				this.$emit('selectCommit', arr)
			},
			// 选择
			chooseThis(i) {
				this.nftList = this.nftList.map( (item,idx) => {
					if (idx == i) {
						item.isActive = !item.isActive
					}
					return item
				})
			},
			// 获取nft列表
			async fetchData() {
				console.log(222)
				const res = await getnftList()
				const { data } = res
				this.nftList = data.map( item => {
					item.isActive = false 
					item.numVal = 1
					item.hold_number = Number(item.hold_number)
					return item
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
	  background-color:#F6F6F6;
	  box-sizing: border-box;
	  height: 100%;
	}
	.fitt-bottom {
		bottom: env(safe-area-inset-bottom);
		position: absolute;
		width: 100%;
		left: 0;
	}
	.input-num {
		display: inline-flex;
		align-items: center;
		&-reduce {
			position: relative;
			width: 19px;
			height: 19px;
			background: #D1D4E8;
			border-radius: 15px;
			cursor: pointer;
			&::before {
				content: "";
				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 11px;
				height: 2px;
				background: #FFFFFF;
				border-radius: 2px;
			}
		}
		&-input {
			width: 50px;
			text-align: center;
			color: #6781FF;
			font-size: 18px;
			font-family: HarmonyOS_Sans_SC_Bold;
			padding: 0 4px;
			box-sizing: border-box;
		}
		&-add {
			position: relative;
			width: 19px;
			height: 19px;
			border: 2px solid #D1D4E8;
			border-radius: 15px;
			cursor: pointer;
			box-sizing: border-box;
			&::before {
				content: "";
				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 11px;
				height: 2px;
				background: #D1D4E8;
				border-radius: 2px;
			}
			&::after {
				content: "";
				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%) rotate(90deg);
				width: 11px;
				height: 2px;
				background: #D1D4E8;
				border-radius: 2px;
			}
		}
	}
::v-deep .inn-number {
    .uni-numbox-btns {
                background: #D1D4E8;
                border-radius: 50%;
            .uni-numbox--text {
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
            }
    }
    .uni-numbox__value {
        background: #fff !important;
        color: #6781FF !important;
        font-weight: bold;
    }
    
}
.b-s-1 {
	transition: all ease .3s;
	&.active {
		border:1px solid #6781FF;
	}
}
.c_969{
	color: #969696;
}
.bddctn {
		height: 88rpx !important;
		width: 100% !important;
		font-size: 40rpx !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		margin-left: 0 !important;
	}
</style>
